﻿
@{
    ViewBag.Title = "平台用户管理 - " + ViewBag.DomainTitle;
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<form class="layui-form query-form ptop15" id="queryToolBar">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">手机号码</label>
            <div class="layui-input-inline">
                <input type="text" name="qPhone" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">名称</label>
            <div class="layui-input-inline">
                <input type="text" name="qName" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">用户ID</label>
            <div class="layui-input-inline">
                <input type="text" name="memberId" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">编号</label>
            <div class="layui-input-inline">
                <input type="text" name="qNumber" class="layui-input">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <span class="layui-btn layui-btn-sm" onclick="javascript: { tableReload();}">查询</span>
            <button type="reset" class="layui-btn layui-btn-primary layui-btn-sm">重置查询条件</button>
        </div>
    </div>
</form>

<table class="layui-table" lay-filter="dataTable" lay-data="{id:'dataTable',height:'full-106',method:'post',cellMinWidth:120,page:true,limit:20,url:'/Member/AjaxData'}">
    <thead>
        <tr>
            <th lay-data="{field:'ID', fixed: 'left', width: 80}">ID</th>
            <th lay-data="{field:'CreateTime',width:170}">创建时间</th>
            <th lay-data="{field:'Phone', width:120 }">手机号码</th>
            <th lay-data="{field:'Number', width: 100}">编号</th>
            <th lay-data="{field:'Name', width: 150}">名称</th>
            <th lay-data="{field:'Img',width:60,templet:'#tmpImg'}">头像</th>
            <th lay-data="{field:'Identity',width:150,edit:'text'}">身份</th>
            <th lay-data="{field:'IsAdmin',width:80,templet: '#tmpIsAdmin'}">管理员</th>
            <th lay-data="{field:'IsProve',width:80,templet: '#tmpIsProve'}">认证</th>
            <th lay-data="{field:'States',width:150,templet: '#tmpStates'}">状态</th>
            <th lay-data="{field:'Introduce',width:150}">签名</th>
            <th lay-data="{field:'Remark', edit: 'textarea'}">备注 E</th>
            <th lay-data="{fixed: 'right', width:160, align:'center', toolbar: '#tmpToolBar'}">操作</th>
        </tr>
    </thead>
</table>

<script type="text/html" id="tmpImg">
    {{# if(d.Img) { }}
    <div id="col_img_{{ d.ID }}" onclick="javascript: { previewImg('col_img_{{ d.ID }}'); }">
        <img src="{{ fileApiUrl + d.Img }}" alt="图" />
    </div>
    {{# }else{ }}
    <span>无</span>
    {{# } }}
</script>

<script type="text/html" id="tmpToolBar">
    <a class="layui-btn layui-btn-xs" lay-event="states">状态设置</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="reload">重置密码</a>
</script>

<script type="text/html" id="tmpIsAdmin">
    <input type="checkbox" name="IsAdmin" value="{{d.ID}}" lay-skin="switch" lay-text="T|F" lay-filter="IsAdmin" {{ d.IsAdmin ? 'checked' : '' }}>
</script>

<script type="text/html" id="tmpIsProve">
    <input type="checkbox" name="IsProve" value="{{d.ID}}" lay-skin="switch" lay-text="T|F" lay-filter="IsProve" {{ d.IsProve ? 'checked' : '' }}>
</script>

<div id="statesInfo">
    <div class="layui-tab layui-tab-brief">
        <ul class="layui-tab-title">
            <li class="layui-this" id="tabIndex">状态信息</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
                <form class="layui-form query-form" id="statesForm">
                    <input type="text" id="ID" name="ID" value="" class="layui-hide" />
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">用户状态</label>
                            <div class="layui-input-inline">
                                <select name="States">
                                    @foreach (var item in Enum.GetValues(typeof(QunProject.Model.EnumHelper.MemberStates)))
                                    {
                                        <option value="@((int)item)">@item.ToString()</option>
                                    }
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">原因</label>
                            <div class="layui-input-inline">
                                <textarea name="BanReason" class="layui-textarea"></textarea>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <span class="layui-btn layui-btn-sm" onclick="javascript: { submitData(); }">保存</span>
                            <span class="layui-btn layui-btn-warm layui-btn-sm" onclick="javascript: { eject.close(); }">关闭</span>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script type="text/html" id="tmpStates">
    {{#
        var _statesTxt = '';
        switch(d.States) {
            case 0:
            _statesTxt = '<span style="color:green;">正常</span>';
            break;
            case 1:
            _statesTxt = '<span style="color:blue;">限制（' + d.BanReason + '）</span>';
            break;
             case 2:
            _statesTxt = '<span style="color:red;">封停（' + d.BanReason + '）</span>';
            break;
            default:
            _statesTxt = '<span style="color:rgb(207, 207, 207);">错误</span>';
            break;
        }
    }}
    {{ _statesTxt }}
</script>

@Html.Partial("~/Views/Shared/_Script.cshtml")

<script>
    var table = layui.table, form = layui.form;
    var eject = new Eject();
    eject.init({
        elm: '#statesInfo',
        width: '400px'
    });
    // 监听单元格编辑
    table.on('edit(dataTable)', function (obj) {
        var value = obj.value //得到修改后的值
            , data = obj.data //得到所在行所有键值
            , field = obj.field; //得到字段
        if (field === 'Identity')
            data.Identity = value;
        if (field === 'Remark')
            data.Remark = value;
        editModel(data);
    });
    // 监听管理员
    form.on('switch(IsAdmin)', function (obj) {
        var data = null;
        for (var i = 0; i < table.cache.dataTable.length; i++) {
            if (table.cache.dataTable[i].ID == this.value) {
                data = table.cache.dataTable[i];
                break;
            }
        }
        if (data) {
            data.IsAdmin = obj.elem.checked;
            editModel(data);
        } else {
            layer.msg('数据异常：[' + this.value + '] 查询不到任何数据')
        }
    });
    // 监听认证
    form.on('switch(IsProve)', function (obj) {
        var data = null;
        for (var i = 0; i < table.cache.dataTable.length; i++) {
            if (table.cache.dataTable[i].ID == this.value) {
                data = table.cache.dataTable[i];
                break;
            }
        }
        if (data) {
            data.IsProve = obj.elem.checked;
            editModel(data);
        } else {
            layer.msg('数据异常：[' + this.value + '] 查询不到任何数据')
        }
    });
    // 监听工具条
    table.on('tool(dataTable)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
        var data = obj.data; //获得当前行数据
        var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
        var tr = obj.tr; //获得当前行 tr 的DOM对象
        if (layEvent === 'states') {//状态设置
            $('#statesForm').setForm(data);
            form.render();
            eject.open();
        }
        if (layEvent === 'reload') {//重置密码
            layer.confirm('确定重置密码吗？<br>@ViewBag.UserDefaultPassword', function (index) {
                layer.close(index);
                $.post('/Member/AjaxReload', { id: data.ID }, function (result) {
                    layer.msg(result.msg);
                });
            });
        }
    });
    // 刷新table
    function tableReload() {
        var paras = $('#queryToolBar').getForm();
        table.reload('dataTable', {
            where: paras
            , page: { curr: 1 }
        });
    };
    // 提交修改
    function editModel(data) {
        $.post('/Member/AjaxEdit', data, function (result) {
            layer.msg(result.msg);
        });
    };

    // 保存状态数据
    function submitData() {
        var data = $('#statesForm').getForm();
        if (data.States == '@((int)QunProject.Model.EnumHelper.MemberStates.限制)' || data.States == '@((int)QunProject.Model.EnumHelper.MemberStates.封停)') {
            if (!data.BanReason) {
                layer.msg('请填写原因');
                return;
            }
        } else {
            data.BanReason = '';
        }
        $.post('/Member/AjaxStates', data, function (result) {
            layer.msg(result.msg);
            tableReload();
            eject.close();
        });
    };

    // 图片预览
    function previewImg(divId) {
        layer.open({
            type: 1,
            title: false,
            closeBtn: 0,
            area: ['80%', '80%'],
            skin: 'layui-layer', //没有背景色
            shadeClose: true,
            content: $('#' + divId).html()
        });
    };
</script>